import React, { memo } from 'react'
import {TopListWrap} from './style'
import {getSizeImage} from 'utils/format-utils.js'
import {getCurrentSongAction,changeIsShowPannel} from '../../pages/player/store/actionCreators'
import {useDispatch} from 'react-redux'
export default memo(function HNTopList(props) {

  const {item} = props;
  const dispatch = useDispatch();

  const play = item1 => {
    dispatch(getCurrentSongAction(item1.id));
    dispatch(changeIsShowPannel(false));
  }
  return (
    <TopListWrap className="top-bg">
      <div className="header">
        <div className="header-left">
          <img src={getSizeImage(item.coverImgUrl,80)} alt="" />
          <a href="todo" className="mask sprite_cover" title={item.name}>飙升榜</a>
        </div>
        <div className="header-right">
          <a href="todo" className="title">
            <h3>{item.name}</h3>
          </a>
          <div className="control">
            <span className="player sprite_02" title="播放"></span>
            <span className="store sprite_02" title="收藏"></span>
          </div>
        </div>
      </div>
      <div className="list">
        {
          item.tracks && item.tracks.slice(0,10).map((item1,index)=>{
            return(
              <div className="list-item" key={item1.id}>
                <div className="list-item-left">
                  <span className="rank-number">{index + 1}</span>
                  <a  href="todo" className="title " title={item1.name}>{item1.name}</a>
                </div>
                <div className="list-item-right">
                  <span className="player sprite_02" onClick={e=>play(item1)}></span>
                  <span className="add sprite_icon2"></span>
                  <span className="store sprite_02"></span>
                </div>
              </div>
            )
          })
        }
        <a href="todo" className="more">查看全部></a>
      </div>
    </TopListWrap>
  )
})
